<template>
  <div id="password">
    <p class="perTitle" style="border: none;"><i></i><span>修改密码</span></p>
        <div class="change">
            <div>
                <span>*</span><label>原始密码:</label><input v-model="origin_password" type="password"/>
            </div>
            <div>
                <span>*</span><label>新 密 码 :</label><input v-model="password" type="password"/>
            </div>
            <div>
                <span>*</span><label>确认密码:</label><input v-model="password_confirmation" type="password"/>
            </div>
            <div class="btn"><button @click="submit()">确 认</button></div>
        </div>
  </div>
</template>

<script>
export default {
  name: 'password',
  data () {
    return {
      origin_password: '',
      password: '',
      password_confirmation: ''
    };
  },
  methods: {
    submit () {
      let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)(?!([^(0-9a-zA-Z)]|[\(\)])+$)([^(0-9a-zA-Z)]|[\(\)]|[a-zA-Z]|[0-9]){6,}$/;
      if (!this.origin_password) {
        this.$message({message: '原始密码不能为空', type: 'warning'});
      } else if (!this.password) {
        this.$message({message: '新密码不能为空', type: 'warning'});
      } else if (!/^.{6,20}$/.test(this.password)) {
        this.$message({message: '请输入6-20位密码', type: 'warning'});
      } else if (!reg.test(this.password)) {
        this.$message({message: '密码必须含有数字、字母和字符的两种', type: 'warning'});
      } else if (!this.password_confirmation) {
        this.$message({message: '确认密码不能为空', type: 'warning'});
      } else if (this.password !== this.password_confirmation) {
        this.$message({message: '两次输入的密码不一致', type: 'warning'});
      } else {
        this.postData();
      }
    },
    postData () {
      this.axios.get('user/modify-pass', {
        params: {
          origin_password: this.origin_password,
          password: this.password,
          password_confirmation: this.password_confirmation
        }
      })
        .then(({data}) => {
          if (data.code === 200) {
            this.$message({message: '修改成功', type: 'success'});
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  }
};
</script>

<style lang="scss">
#password {
  .perTitle {
    /*padding: 10px 0;*/
    height: 40px;
    border-bottom: 1px solid #dfdfdf;
    font-size: 16px;
  }
  .perTitle i {
    width: 5px;
    display: inline-block;
    height: 16px;
    vertical-align: middle;
    background-color: #10a57d;
    line-height: 40px;
    margin: 0 10px;
  }
  .change {
    width: 100%;
    background: url("../../assets/images/password.png") no-repeat;
    background-size: 896px 100%;
    height: 360px;
    padding: 30px;
    padding-top: 50px;
  }
  .change div {
    width: 50%;
    margin: 0 auto;
    padding: 20px 0;
    font-size: 16px;
  }
  .change div span {
    color: #ff0000;
    vertical-align: middle;
    margin-right: 10px;
  }
  .change div label {
    color: #424242;
    width: 80px;
    display: inline-block;
  }
  .change div input {
    border: 1px solid #dfdfdf;
    padding: 6px 10px;
  }
  .change .btn button {
    width: 100%;
    background-color: #10a57d;
    color: #fff;
    padding: 8px 0;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
}
</style>
